<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>驴妈妈流立方</title>
	<meta name="description" content="overview &amp; stats" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="${rc.contextPath}/stylesheets/main.css">
	<link rel="stylesheet" href="${rc.contextPath}/stylesheets/d3-collapsible-tree.css">
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css" />
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css" />
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css" />
	<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
	
	<link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-datepicker3.min.css">
	<link rel="stylesheet" href="${rc.contextPath}/stylesheets/jquery-ui.min.css">
	<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
</head>
	<body class="skin-2" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
						<div class="col-xs-2">
							<div class="dataTables_length">
								<label for="exampleInputName2">页面名称
									<input type="text" id="pageCode" name="pageCode" placeholder="页面名称" class="form-control">
								</label>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="dataTables_length">
								<label>日期
									<input type="text" id="dateTime" name="dateTime" class="form-control" placeholder="日期">
								</label>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="dataTables_length">
								<button type="button" class="btn btn-pink btn-sm" id="generateBtn">
									<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
									查询
								</button>
								&nbsp;&nbsp; <span style="color: red;" id="message" hidden="true"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row" id="container"></div>
		</div>
		<!-- basic scripts -->
		<script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${rc.contextPath}/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script type="text/javascript"src="${rc.contextPath}/javascripts/d3.min.js"></script>
		<script type="text/javascript"src="${rc.contextPath}/javascripts/d3.layout.js"></script>
		<script type="text/javascript"src="${rc.contextPath}/javascripts/concept-graph.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap-datepicker.min.js"></script>

		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		
		
		<script type="text/javascript">
			var tree = CollapsibleTree("#container");
			var query = $("pageCode").val();
			$(document).ready(function(event) {
				$('#dateTime').datepicker({
					format : "yyyy-mm-dd",
					autoclose : true
				});
				
				$("#generateBtn").click(function() {
					$("#message").hide();
					var pageCode = $("#pageCode").val();
					var dateTime = $("#dateTime").val();
					if (pageCode == null|| pageCode == "") {
						$("#message").show();
						$("#message").text("页面名称不能为空");
					} else if (dateTime == null|| dateTime == "") {
						$("#message").show();
						$("#message").text("日期不能为空");
					} else {
						var parameters = "?pageCode="+ pageCode+ "&dateTime="+ dateTime;
						tree.init('${rc.contextPath}/application/ajaxData'+ parameters);
						setInterval(abc, 100);
					}
				});

			});

			function abc() {
				$("circle").unbind('click').click(function() {
					var pageCode = $(this).next().text().trim();
					var start = pageCode.indexOf("(");
					if (start >= 0) {
						pageCode = pageCode.substring(0, start);
					}
					$("#pageCode").val(pageCode);
					var dateTime = $("#dateTime").val();
					var parameters = "?pageCode=" + pageCode+ "&dateTime=" + dateTime;
					tree.init('${rc.contextPath}/application/ajaxData'+ parameters);
				});
			}
			
			$("#pageCode").autocomplete({
				source : "${rc.contextPath}/application/autoComplete",
				minLength : 1
			});
		</script>
	</body>
</html>